<template>
  <div style="width:100%">
    <!-- <section class="scroll_container"> -->
    <section class="list_container" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <ul class="deliverable_address">
        <li v-for="(item,index) in list" :key="item.id">
          <span class="choose_icon" @click="changeAdr(item.UAID)">
            <!-- <i class="iconfont icon-dui" :class="{ choosed: item.DEFAULTBZ=='y' }" @click="changeAdr(item.UAID)"></i> -->
            <svg style="" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              fill="#ced4da" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"
              :class="{ choosed: item.DEFAULTBZ=='y' }"
            ><defs><style type="text/css"></style></defs><path d="M476.808045 0.000043C213.401753 0.106685-0.031993 213.68973 0 477.074693S213.551052 953.98938 476.94668 954.021373s476.957344-213.412417 477.085315-476.808045A477.010665 477.010665 0 0 0 476.808045 0.000043z m273.761252 353.369671L441.861388 661.853674a43.1901 43.1901 0 0 1-62.023117 0L202.214984 484.251715a43.864079 43.864079 0 1 1 62.033781-62.033782l147.21959 147.21959 277.89897-276.86454a43.861946 43.861946 0 1 1 62.023117 62.033781z m0 0"></path></svg>
          </span>
          <!-- <span @click="editAdr(item)"> -->
          <span @click="changeAdr(item.UAID)">
            <p class="choose_content">
              <span>{{item.LXRXM}}</span>
              <span>{{item.LXRSJ}}</span>
            </p>
            <p class="choose_place">
              <span>{{item.PRIVINCEMC}}{{item.CITYMC}}{{item.STREETMC}}{{item.ADDR}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.ADDRALIAS}}</span><br>
              <span>{{item.TAG}}</span>
            </p>
          </span>
          <span class="delete_adr">
            <span class="remove_button" @click="removeadr(item.UAID)">删除</span>
            <span class="remove_button" @click="editAdr(item)">修改</span>
          </span>
        </li>
      </ul>
      <p class="loadingT">{{loadingText}}</p>
    </section>
    <!-- </section> -->
    <!-- <nuxt-link to="/wode/addAddress" class="add_address" tag="p">新增收货地址</nuxt-link> -->
    <section class="add_address">
      <mt-button size="large" type="primary" @click="addAddress">新增地址</mt-button>
    </section>
    <transition name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
  </div>
</template>
<script>
import navTop from '~/components/common/navTop';
import alertTip from '~/components/common/alertTip';

export default {
  data() {
    return {
      showBack: true,
      bkParam: 'bk',
      headTitle: '地址管理',
      ts: this.newStore(),
      tq: this.getData(),
      page: 1,
      DATA: {},
      DATA2: {
        rowsperpage: '10',
        page: '1',
        ordercolumn: 'createdate',
        ordertype: 'desc',
      },
      DATA3: {},
      list: [],
      iscur: 0,
      alertText: '',
      showAlert: false,
      busy: true, // 如果该属性的值为true，则将禁用无限滚动。
      loadingText: '',
    };
  },
  created() {
    // this.$root.showfooter = false;

    document.title = '地址列表';

    this.getaddress(true);
  },
  destroyed() {
    // this.$root.showfooter = true;
  },
  components: {
    navTop,
    alertTip,
  },
  methods: {
    addAddress() {
      this.$router.push({
        name: 'wode-addAddress',
      });
    },
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.page += 1;
        this.getaddress(true);
      }, 500);
    },
    closeTip() {
      this.showAlert = false;
    },
    editAdr(item) {
      const addInfo = JSON.stringify(item);
      console.log('----- 需要修改的患者信息 -----');
      console.log(addInfo);
      this.$router.push({
        name: 'wode-editAddress',
        query: { addInfo },
      });
    },
    removeadr(id) {
      this.$messagebox.confirm('确定删除该地址?').then((action) => {
        if (action == 'confirm') { // 确认的回调
          this.DATA.uaid = id;
          this.tq.removeadr(this.DATA,this).then((ts) => {
            if (ts.d.RESULT == '200') {
              this.page = 1;
              this.list = [];
              this.getaddress(true);
              this.$messagebox('删除成功');
            } else {
              this.$messagebox(`删除失败: ${ts.d.RESULTTEXT}`);
            }
          });
        }
      }).catch((err) => {
        /*
        if (err == 'cancel') { // 取消的回调
          this.$messagebox('提示', '取消删除');
        }
        */
      });
    },
    // removeadr(id) {
    //   const res = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.02.28',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: { uaid: id },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': res,
    //   }).then((ts) => {
    //     this.list.splice(0, 1);
    //   });
    // },

    getaddress(flag) {
      this.DATA2.page = `${this.page}`;
      this.tq.getaddress(this.DATA2,this).then((ts) => {
        // this.list = ts.d.DATAOBJ.DATA;
        if (flag) {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA);
          if (ts.d.DATAOBJ.DATA.length == 0) {
            this.busy = true;
            this.loadingText = '没有更多数据';
          } else {
            this.busy = false;
            this.loadingText = '加载中...';
          }
        } else {
          this.yuyueList = ts.d.DATAOBJ.DATA;
          this.busy = false;
        }
      });
    },
    // getaddress() {
    //   const req = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.02.27',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: {
    //         rowsperpage: '20',
    //         page: '1',
    //         ordercolumn: 'createdate',
    //         ordertype: 'desc',
    //       },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': req,
    //   }).then((ts) => {
    //     this.list = ts.d.DATAOBJ.DATA;
    //   });
    // },

    changeAdr(id) {
      this.DATA3.uaid = id;
      this.tq.changeAdr(this.DATA3,this).then((ts) => {
        /*
        this.page = 1;
        this.list = [];
        this.getaddress(true);
        */
        if (ts.d.RESULT == '200') {
          this.page = 1;
          this.list = [];
          this.getaddress(true);
          this.$messagebox('更新默认地址成功');
        } else {
          this.$messagebox(`更新默认地址失败: ${ts.d.RESULTTEXT}`);
        }
      });
    },
    // changeAdr(id) {
    //   const req = JSON.stringify({
    //     OTRequest: {
    //       VERSION: '1.0',
    //       TN: 'F27.APP.02.33',
    //       CLIENTID: 'YLAPP',
    //       RYBID: 'PAT',
    //       TOKEN: `${sessionStorage.getItem('rybToken') == null ? '' : sessionStorage.getItem('rybToken')}`,
    //       DATA: { uaid: id },
    //     },
    //   });
    //   this.spost(this.ts, '/doctor/AppMainServlet.ap', {
    //     '': req,
    //   }).then((ts) => {
    //     this.getaddress();
    //     // this.$router.back(-1);
    //   });
    // },
  },
};
</script>
<style scoped>
.list_container::-webkit-scrollbar {
    display: none;
}
* {
  margin: 0;
  padding: 0;
}
.delete_adr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 15%;
  line-height: 2rem;
  margin: 0;
}
.loadingT {
  text-align: center;
  color: #ccc;
  margin-top: 1.5rem;
}
.scroll_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 3rem;
}
.list_container {
  margin-top: 0rem;
  margin-bottom: 1rem;
  font-size: 1rem
}
.list_container p {
  margin-bottom: 0.4rem;
}
.deliverable_address {
  /* background: #fff; */
  overflow: auto;
  width: 95%;
  margin: auto;
}

.deliverable_address li {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
  border-radius: 10px;
  margin: .5rem 0;
}
.deliverable_address span:nth-child(2) {
  /* flex-grow: 5; */
  width: 80%;
}
.choose_icon {
  width: 5%;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  margin-right: 0.4rem;
}
.choose_icon i {
  font-size: 1.2rem;
  display: block;
}
.icon-selected1 {
  color: #aaa;
}
.choosed {
  fill: #1b6cbe;
}
.choose_content span:first-child {
  font-weight: 600;
  font-family: "Microsoft Yahei";
}
.choose_content span:last-child {
  margin-left: .5rem;
  font-size: 0.9rem;
}
.choose_place{
  line-height: 1.1rem
}
.choose_place span:first-child {
  font-size: 0.9rem;
  color: #666;
}
.choose_place span:last-child {
  background: #4cd964;
  padding: 0.2rem 0.6rem;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  margin-right: 0.4rem;
}
.out_delivery {
  background: #f1f1f1;
  font-family: "Microsoft Yahei";
  padding: 0.4rem;
  color: #666;
  font-size: 0.9rem;
}
.out_delivery_container span {
  color: #ccc;
}
.add_address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.remove_button {
  /* padding: 0.2rem 1rem;
  background-color: #428bca;
  border-color: #357ebd; */
  color: #dee2e6;
  /*   border-radius: 0.2rem;
  border: 1px solid transparent; */
  font-size: 0.8rem;
  z-index: 5;
}
.mint-button--large {
  margin: 1rem auto;
  width: 90%;
}
</style>

